<template>
  <div ref="chartContainer" style="width:auto;   height: 50vh;;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DoughnutChart',
  props: {
    chartData: {
      type: Array,
      default: () => [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'}
      ]
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      chartInstance: null,
      defaultOptions: {
        title: {
          text: this.title
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: '#333'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
                formatter: '{b}\n{c} ({d}%)'
              }
            },
            labelLine: {
              show: false
            },
            data: this.chartData
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart();
    this.observeChartResize()
  },
  beforeDestroy() {
    this.cleanup();
  },
  methods: {
    initChart() {

      this.defaultOptions.series[0].data = this.chartData
      console.log("图表", this.chartData)
      this.chartInstance = echarts.init(this.$refs.chartContainer);
      this.chartInstance.setOption(this.defaultOptions)
      // this.updateChart()

    },
    updateChart(newVal) {
      this.$nextTick(() => {
        this.defaultOptions.series[0].data = newVal
        this.chartInstance.setOption(this.defaultOptions)
      })
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    cleanup() {
      window.removeEventListener('resize', this.handleResize);
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
    },
    observeChartResize() {
      // 如果浏览器支持 ResizeObserver
      if (typeof ResizeObserver !== 'undefined') {
        this.resizeObserver = new ResizeObserver(() => {
          if (this.chartInstance) {
            this.chartInstance.resize(); // 调整图表大小
          }
        });
        this.resizeObserver.observe(this.$refs.chartContainer); // 监听容器
      } else {
        // 如果不支持，降级使用 window.resize
        window.addEventListener('resize', this.handleResize);
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler() {
          if (this.chartInstance) {
            this.chartInstance.setOption(this.defaultOptions);
          }
        }
      },
    }
  },
}
</script>

<style scoped>
/* 可添加自定义样式 */
</style>
